<template>
  <div class="app-container">
    <div class="table-operation">
      <span>
        <AuthButton @click="c" name="新增" />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index" />
      <el-table-column label="会员等级名称" prop="levelName" />
      <el-table-column label="升级条件" prop="upgrade" />
      <el-table-column label="有效期" prop="validityName" />
      <!--<el-table-column label="基准价" prop="benchmarkName"/>-->
      <el-table-column label="折扣" prop="discount" />
      <el-table-column label="允许积分">
        <template slot-scope="{ row }">
          <el-tag v-if="row.usingPoints">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="赠送积分" prop="givingPoints" />
      <el-table-column label="创建时间" prop="createTime" />
      <el-table-column label="最后修改时间" prop="updateTime" />
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="{ row }">
          <AuthButton @click="r(row)" name="查看" />
          <AuthButton @click="u(row)" name="编辑" />
          <AuthButton @click="d(row)" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <h3 class="subtitle"><span>升级规则</span></h3>
        <el-form-item label="会员等级名称" prop="levelName"  :verify="{ minLength: 2, maxLength: 6 }">
          <el-input v-model="form.data.levelName" clearable placeholder="设置规范名称易于理解，如银卡会员" />
        </el-form-item>
        <el-form-item label="升级条件" prop="upgrade" verify>
          当会员新增积分达到
          <el-input-number v-model="form.data.upgrade" :min="1" :max="99999999" :precision="0" style="width:unset;" placeholder="输入大于0的数" />
          分时，自动升到当前等级
        </el-form-item>
        <el-form-item label="等级有效期" prop="validity">
          <el-radio v-model="form.data.__validity" :label="false">
            永久
          </el-radio>
          <!-- <el-radio v-model="form.data.__validity" :label="true">
            固定期限
          </el-radio>
          <el-input v-show="form.data.__validity" v-model="form.data.validity" prop="validityUnit" verify class="input-with-select" placeholder="输入大于0的数">
            <KiSelect
              slot="append"
              v-model="form.data.validityUnit"
              :options="[
                { dataValue: 1, dataName: '日' },
                { dataValue: 2, dataName: '月' },
                { dataValue: 3, dataName: '年' }
              ]"
              :props="{ value: 'dataValue',label: 'dataName'}"
              :clearable="false"
            />
          </el-input> -->
          <form-item-tip>
            升级规则说明：
            <!-- <div>1. 等级有效期：按升（降）级到当前等级开始计算，等级有效期内新增积分。</div>
            <div>2. 有效期内，用户新增当前等级升级条件积分即可保级，反之降一级。</div>
            <div>3. 有效期内，用户新增更高一级升级条件积分即可升级。</div> -->
            <div>1. 新增积分仅针对连续升级，跨级需新增各级升级条件积分的累加值。</div>
          </form-item-tip>
        </el-form-item>

        <!-- <el-divider /> -->

        <!-- <h3 class="subtitle"><span>权益</span></h3>
        <el-form-item label="基准价" prop="benchmark" verify>
          <Selector v-model="form.data.benchmark" :options="[
            {dataValue:1,dataName:'零售价'},
            {dataValue:2,dataName:'活动价'},
          ]"/>
        </el-form-item>
        <el-form-item label="优惠折扣" prop="discount" verify>
          <el-input-number v-model="form.data.discount" :min="0" :max="1" :precision="2" placeholder="输入大于0小于1的数" />
          <form-item-tip>会员消费时将在当前现价的基础上享受优惠折扣</form-item-tip>
        </el-form-item> -->

        <el-divider />

        <h3 class="subtitle"><span>升级礼包</span></h3>
        <el-form-item label="允许积分" prop="usingPoints">
          <el-switch v-model="form.data.usingPoints" active-color="#13ce66" :active-value="1" :inactive-value="0" />
          <form-item-tip>勾选后会员消费将进行积分</form-item-tip>
        </el-form-item>
        <el-form-item label="赠送积分" prop="givingPoints" verify>
          <el-input-number v-model="form.data.givingPoints" :min="0" :max="99999" :precision="0" placeholder="输入大于0的数" />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
export default {
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/vip/vip-level',
      form: {
        data: {
          validityUnit: 1,
          __validity: false
        }
      }
    }
  ),
  data() {
    return {
      loading: false
    }
  },
  watch: {
    'form.data.validity'(newVal) {
      if (this.$notEmpty(newVal)) {
        this.form.data.__validity = true
      }
    },
    'form.data.__validity'(newVal) {
      if (!newVal) {
        this.form.data.validity = null
      }
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.input-with-select {
  width: unset !important;

  ::v-deep .el-select .el-input {
    width: 46px !important;

    & > .el-input__inner {
      padding-right: 17px;
    }
  }

  ::v-deep .el-input-group__append {
    background-color: #fff;
  }
}
</style>
